<link href="__PUBLIC__/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<script src="__PUBLIC__/vendors/moment/moment.min.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>

<div class="input-group">
    <input autocomplete="off" name="[picker-name]" id="date-range-picker-[picker-name]"
           class="form-control" type="text" placeholder="选择时间范围">
    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
</div>

<script>
    $('#date-range-picker-[picker-name]').daterangepicker({
        "ranges":
        {
            "今天":
            [
                "{:date('Y-m-d H:i:s')}",
                "{:date('Y-m-d H:i:s')}"
            ],
            "昨天":
            [
                "{:date('Y-m-d H:i:s', time() - 24 * 60 * 60)}",
                "{:date('Y-m-d H:i:s', time() - 24 * 60 * 60)}"
            ],
            "最近3天":
            [
                "{:date('Y-m-d H:i:s', time() - 2 * 24 * 60 * 60)}",
                "{:date('Y-m-d H:i:s')}"
            ],
            "最近7天":
            [
                "{:date('Y-m-d H:i:s', time() - 6 * 24 * 60 * 60)}",
                "{:date('Y-m-d H:i:s')}"
            ],
            "最近30天":
            [
                "{:date('Y-m-d H:i:s', time() - 29 * 24 * 60 * 60)}",
                "{:date('Y-m-d H:i:s')}"
            ],
            "全部":
            [
                "{:date('Y-m-d H:i:s', 0)}",
                "{:date('Y-m-d H:i:s')}"
            ]
        },
        "autoApply": true,
        "timePicker24Hour": true,
        "timePicker" : true,
        "startDate": "{$range_start.[picker-name]}",
        "linkedCalendars": false,
        "endDate": "{$range_end.[picker-name]}",
        "locale": {
            "direction": "ltr",
            "format": "YYYY-MM-DD HH:mm:ss",
            "separator": " ~ ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "从",
            "toLabel": "到",
            "customRangeLabel": "自定义",
            "daysOfWeek": [
                "日",
                "一",
                "二",
                "三",
                "四",
                "五",
                "六"
            ],
            "monthNames": [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ],
            "firstDay": 1
        },
    }, function(start, end, label) {
        console.log("New date range selected: " + start.format('YYYY-MM-DD HH:mm:ss') + " to " + end.format('YYYY-MM-DD HH:mm:ss') + " (predefined range: " + label + ")");
    });
</script>
